{% extends 'myhome/index.html'%}

{% block title %}
<title>个人信息</title>
{% endblock %}

{% block css %}
<link href="/static/myhome/css/personal.css" rel="stylesheet" type="text/css">
<link href="/static/myhome/css/addstyle.css" rel="stylesheet" type="text/css">
{% endblock %}

{% block js%}
<script src="/static/myhome/AmazeUI-2.4.2/assets/js/amazeui.js" type="text/javascript"></script>
{%endblock%}

{% block con%}
<div class="center">
    <div class="col-main">
        <div class="main-wrap">
            <div class="user-address">
                <!--标题 -->
                <div class="am-cf am-padding">
                    <div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">地址管理</strong> / <small>Address&nbsp;list</small></div>
                </div>
                <hr/>
                <ul class="am-avg-sm-1 am-avg-md-3 am-thumbnails">
                    {% for i in data%}
                    
                        <li class="user-addresslist {%if i.isChecked %} defaultAddr {%endif%}">
               
                    
                      
                        <span class="new-option-r" lid="{{i.id}}"><i class="am-icon-check-circle"></i>默认地址</span>
                        <p class="new-tit new-p-re">
                            <span class="new-txt">{{i.buser}}</span>
                            <span class="new-txt-rd2">{{user.phone}}</span>
                        </p>
                        
                        <div class="new-mu_l2a new-p-re">
                            <p class="new-mu_l2cw">
                                <span class="title">地址：</span>                              
                                <span class="province">{{i.province}}</span>                        
                                <span class="city">{{i.city}}</span>
                                <span class="dist">{{i.county}}</span>
                                <span class="street">{{i.info}}</span></p>                                
                        </div>
                   
                        <div class="new-addr-btn">
                            <a href="#"><i class="am-icon-edit"></i>编辑</a>
                            <span class="new-addr-bar">|</span>
                            <a href="javascript:void(0);" onclick="delClick(this);"><i class="am-icon-trash"></i>删除</a>
                        </div>
                    </li>
                    {%endfor%}
                </ul>
                <div class="clear"></div>
                
                <!--例子-->
                <div class="am-modal am-modal-no-btn" id="doc-modal-1">

                    <div class="add-dress">

                        <!--标题 -->
                        <div class="am-cf am-padding">
                            <div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">新增地址</strong> / <small>Add&nbsp;address</small></div>
                        </div>
                        <hr/>

                        <div class="am-u-md-12 am-u-lg-8" style="margin-top: 20px;">
                            <form class="am-form am-form-horizontal" action="" method="POST" enctype="multipart/form-data">
                                {% csrf_token %}
                                <div class="am-form-group">
                                    <label for="user-name" class="am-form-label">收货人</label>
                                    <div class="am-form-content">
                                        <input name="buser" value="" type="text" id="user-name" placeholder="收货人">
                                    </div>
                                </div>

                                <div class="am-form-group">
                                    <label for="user-phone" class="am-form-label">手机号码</label>
                                    <div class="am-form-content">
                                        <input name="buser_phone" value="" id="user-phone" placeholder="手机号必填" type="text">
                                    </div>
                                </div>
                                <div class="am-form-group">
                                    <label for="user-address" class="am-form-label">所在地</label>
                                    <div class="am-form-content address">
                                        <select id="province" name="province" >
                                            {% for s in pcity %}
                                            <option value="{{s.id}}">{{s.name}}</option>
                                            {%endfor%}
                                        </select>
                                        <select id="city" name="city">
                                            <option value="">--请选择--</option>
                                        </select>
                                        <select id="county" name="county">
                                            <option value="">--请选择--</option>
                                        </select>
                                    </div>
                                </div>
                                
                                <div class="am-form-group">
                                    <label for="user-intro" class="am-form-label">详细地址</label>
                                    <div class="am-form-content">
                                        <textarea name="info" value="" class="" rows="3" id="user-intro" placeholder="输入详细地址"></textarea>
                                        <small>100字以内写出你的详细地址...</small>
                                    </div>
                                </div>

                                <div class="am-form-group">
                                    <div class="am-u-sm-9 am-u-sm-push-3">
                                        <input type="submit" class="am-btn am-btn-danger" name="" id="save" value="保存">
                                    </div>
                                </div>
                            </form>
                        </div>

                    </div>

                </div>

            </div>

            <script type="text/javascript">
                $(document).ready(function() {							
                    $(".new-option-r").click(function() {
                        $(this).parent('.user-addresslist').addClass("defaultAddr").siblings().removeClass("defaultAddr");
                        // 获取当前设为默认地址的id
                        var lid = $(this).attr('lid')
                        // 发送AJAX
                        $.get("{% url 'myhome_myinfo_address' %}",{'id':lid},function(data){

                        },'json')

                        
                    });
                    
                    var $ww = $(window).width();
                    if($ww>640) {
                        $("#doc-modal-1").removeClass("am-modal am-modal-no-btn")
                    }
                    
                })
            </script>

            <div class="clear"></div>

        </div>
    </div>
    <aside class="menu">
        <ul>
            <li class="person active">
                <a href="{% url 'myhome_myinfo_index'%}">个人中心</a>
            </li>
            <li class="person">
                <a href="#">个人资料</a>
                <ul>
                    <li> <a href="{%url 'myhome_myinfo_userinfo'%}">个人信息</a></li>
                    <li> <a href="safety.html">安全设置</a></li>
                    <li> <a href="{% url 'myhome_myinfo_address' %}">收货地址</a></li>
                </ul>
            </li>
            <li class="person">
                <a href="#">我的交易</a>
                <ul>
                    <li><a href="{%url 'myhome_myinfo_order'%}">订单管理</a></li>
                    <li> <a href="change.html">退款售后</a></li>
                </ul>
            </li>
            <li class="person">
                <a href="#">我的资产</a>
                <ul>
                    <li> <a href="coupon.html">优惠券 </a></li>
                    <li> <a href="bonus.html">红包</a></li>
                    <li> <a href="bill.html">账单明细</a></li>
                </ul>
            </li>
        
            <li class="person">
                <a href="#">我的小窝</a>
                <ul>
                    <li> <a href="collection.html">收藏</a></li>
                    <li> <a href="foot.html">足迹</a></li>
                    <li> <a href="comment.html">评价</a></li>
                    <li> <a href="news.html">消息</a></li>
                </ul>
            </li>
        
        </ul>       
    </aside>

</div>
<script>
    // 下拉框绑定change事件
    $('.address select').on("click",function(){
        // 获取当前选中option的id
        var id = $(this).val()
        console.log(id)
        // 发送ajax请求,获取下一级的数据
        $.get('{% url "myhome_getcitys" %}',{'id':id},function(data){
            // 判断返回的数据,如果为空,
            if(data.length == 0){ return }

            // 判断级别
            if(data[0].level == 2){
                var sel = $("#city")
            }else if(data[0].level == 3){
                var sel = $("#county")
            }

            var ops = ''
            // 遍历获取的结果,拼接成option选项
            for (var i = 0; i < data.length; i++) {
                ops += '<option value="'+data[i]['id']+'">'+data[i].name+'</option>'
            }
            // 把拼接好的选项加入到下拉框中
            sel.html(ops)

        },'json')
    })

    // 保存按钮绑定单击事件
    $('#save').click(function(){
        // 判断收货人是否为空
        if(!$('#user-name').val()){
            alert('收货人不能为空')
            return false
        }
        // 判断收货电话是否为空
        if(!$('#user-phone').val()){
            alert('电话不能为空')
            return false
        }
        // 判断所在地是否为空
        if(!$('#province').val() |!$('#city').val()|!$('#county').val()){
            alert('收货地址不完整，请重新填写')
            return false
        } 
        // 提交数据
        $(this).parents("form").submit()
    })
    

</script>


{%endblock%}